<template>
    <!-- 搜索展示页 -->
    <div class="search-list">
        <div class="list-top">
            <div class="search-logo-input">
                <h2>
                    <span>智能</span>
                    <img src="@/assets/image/search-logo.png" alt="" />
                    <span>搜搜</span>
                </h2>
                <div class="search-input">
                    <el-input
                        placeholder="搜人、案件、线索、历史、其他等"
                        v-model="searchInput"
                        class="input-with-select"
                        @keyup.enter.native="clickSearch"
                    >
                        <el-button
                            slot="append"
                            icon="el-icon-search"
                            @click="clickSearch"
                            >搜索</el-button
                        >
                    </el-input>
                </div>
            </div>
            <div class="comeback_btn" @click="goBack">
                <i class="icon iconfont">&#xe7ad;</i> 返回
            </div>
        </div>
        <!-- 高级检索 -->
        <div class="advanced-search">
            <el-collapse v-model="activeName" @change="handleChange">
                <el-collapse-item title="高级检索" name="高级检索">
                    <BaseForm :form="searchForm">
                        <el-form-item label="文件类型">
                            <el-checkbox-group v-model="searchForm.fileType">
                                <el-checkbox
                                    :label="item"
                                    name="fileType"
                                    v-for="(item, index) in fileTypeList"
                                    :key="index"
                                ></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item label="文档大小">
                            <el-checkbox-group
                                v-model="searchForm.documentSize"
                            >
                                <el-checkbox
                                    label="1M以内"
                                    name="documentSize"
                                ></el-checkbox>
                                <el-checkbox
                                    label="1-5M之间"
                                    name="documentSize"
                                ></el-checkbox>
                                <el-checkbox
                                    label="5-10M之间"
                                    name="documentSize"
                                ></el-checkbox>
                                <el-checkbox
                                    label="10M以上"
                                    name="documentSize"
                                ></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item label="排序">
                            <el-radio-group v-model="searchForm.sort">
                                <el-radio label="默认"></el-radio>
                                <el-radio label="浏览量"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </BaseForm>
                </el-collapse-item>
            </el-collapse>
        </div>
        <div class="list-bottom">
            <div class="seach-list-left">
                <BaseTabCard :tabList="searchTabs" @change="changeTab">
                    <template slot-scope="item">
                        <div class="tab-list">
                            <ul class="item-ul">
                                <li
                                    v-for="(ele, index) in item.data['content']"
                                    :key="index"
                                >
                                    <h4>
                                        {{ searchCode }}
                                        <span>{{ ele.title }}</span>
                                    </h4>
                                    <h5>
                                        类型：<span>{{ ele.type }}</span>
                                    </h5>
                                    <p>
                                        内容：<span class="list-name">{{
                                            ele.name
                                        }}</span
                                        ><span class="list-plcae">{{
                                            ele.place
                                        }}</span>
                                    </p>
                                </li>
                            </ul>

                            <div class="item-right">
                                <div class="right-header">
                                    <h3>搜搜热榜</h3>
                                    <span @click="changeHeat"
                                        ><i class="icon iconfont">&#xe79e;</i>
                                        换一换</span
                                    >
                                </div>
                                <div class="right-heat">
                                    <ul class="clearfix">
                                        <li
                                            v-for="(item, index) in heatList"
                                            :key="index"
                                        >
                                            <p>
                                                <span class="index-list">{{
                                                    index + 1
                                                }}</span>
                                                <span class="text-list">{{
                                                    item.text
                                                }}</span>
                                            </p>
                                            <span
                                                ><i
                                                    class="icon iconfont flame-icon"
                                                    >&#xe7b5;</i
                                                >
                                                {{ item.num }}</span
                                            >
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </template>
                </BaseTabCard>
            </div>
        </div>
    </div>
</template>

<script>
import BaseTabCard from '@/components/BaseTabCard';
import BaseForm from '@/components/BaseForm';

export default {
    name: 'SearchList',
    props: {
        searchCode: {
            type: String,
            default: () => {
                return '';
            }
        },
        searchForm: {
            type: Object,
            default: () => {
                return {
                    fileType: [],
                    documentSize: [],
                    sort: ''
                };
            }
        }
    },
    components: {
        BaseTabCard,
        BaseForm
    },
    data() {
        return {
            searchInput: '',
            fileTypeList: [
                'doc',
                'ppt',
                'txt',
                'ofd',
                'pptx',
                'docx',
                'xls',
                'xlsx',
                'cebx',
                'tif',
                'jpg'
            ],
            // 搜索tabs数据
            searchTabs: [
                {
                    label: '所有',
                    key: 'all',
                    content: [
                        {
                            title: '涉毒走失人员',
                            type: '人员',
                            name: '张三',
                            place: '【高新区】0627枪_天皇娱乐-大门口XXXXXXXX',
                            time: '2021-06-28 15:31:52'
                        },
                        {
                            title: '经营目标对象',
                            type: '人员',
                            name: '张三',
                            place: '【高新区】0627枪_天皇娱乐-大门口XXXXXXXX',
                            time: '2021-06-28 15:31:52'
                        },
                        {
                            title: '延伸人员',
                            type: '人员',
                            name: '张三',
                            place: '【高新区】0627枪_天皇娱乐-大门口XXXXXXXX',
                            time: '2021-06-28 15:31:52'
                        },
                        {
                            title: '延伸人员',
                            type: '人员',
                            name: '张三',
                            place: '【高新区】0627枪_天皇娱乐-大门口XXXXXXXX',
                            time: '2021-06-28 15:31:52'
                        },
                        {
                            title: '延伸人员',
                            type: '人员',
                            name: '张三',
                            place: '【高新区】0627枪_天皇娱乐-大门口XXXXXXXX',
                            time: '2021-06-28 15:31:52'
                        },
                        {
                            title: '延伸人员',
                            type: '人员',
                            name: '张三',
                            place: '【高新区】0627枪_天皇娱乐-大门口XXXXXXXX',
                            time: '2021-06-28 15:31:52'
                        }
                    ]
                },
                { label: '人员', key: 'personnel', content: [] },
                { label: '案件', key: 'case', content: [] },
                { label: '线索', key: 'clue', content: [] },
                { label: '索量统计', key: 'statistics', content: [] },
                { label: '历史', key: 'history', content: [] },
                { label: '其他', key: 'other', content: [] }
            ],
            heatList: [
                { text: '高积分涉毒人员', num: 158 },
                { text: '高积分涉毒号码', num: 148 },
                { text: '前科人员', num: 138 },
                { text: '疑似团伙挖掘', num: 108 },
                { text: '反馈情况', num: 98 },
                { text: '涉毒人员聚集', num: 88 },
                { text: '实时预警', num: 84 },
                { text: '高危场所', num: 75 },
                { text: '关注人员', num: 66 },
                { text: '高危场所旅馆', num: 58 },
                { text: '高积分涉毒人员', num: 158 },
                { text: '高积分涉毒号码', num: 148 },
                { text: '前科人员', num: 138 },
                { text: '疑似团伙挖掘', num: 108 },
                { text: '反馈情况', num: 98 },
                { text: '涉毒人员聚集', num: 88 },
                { text: '实时预警', num: 84 },
                { text: '高危场所', num: 75 },
                { text: '关注人员', num: 66 },
                { text: '高危场所旅馆', num: 58 }
            ],
            activeName: '高级检索'
        };
    },
    created() {
        this.searchInput = this.searchCode;
    },
    mounted() {},
    methods: {
        clickSearch() {},
        goBack() {
            this.$emit('click-backbtn');
        },
        changeTab(active, list) {},
        changeHeat() {},
        handleChange() {}
    }
};
</script>

<style lang="less" scoped>
@import '~@/assets/css/common.less';
.search-list {
    padding-top: 1.75rem;
    .list {
        &-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 2rem;
            margin-bottom: 0.75rem;
            .search-logo-input {
                display: flex;
                align-items: center;
                h2 {
                    margin-right: 0.67rem;
                    img {
                        width: 2.67rem;
                        height: 1.67rem;
                        vertical-align: middle;
                    }
                    span {
                        font-size: 1.5rem;
                        font-family: ZhenyanGB-Regular, ZhenyanGB;
                        font-weight: 400;
                        line-height: 1.5rem;
                        text-shadow: 0px 0px 0px rgba(35, 100, 217, 0.5);
                        &:first-child {
                            color: #ffa200;
                        }
                        &:last-child {
                            color: #2364d9;
                        }
                    }
                }
                ::v-deep .search-input {
                    text-align: center;
                    .el-input-group {
                        width: 46.92rem;
                        // height: 4.5rem;
                        .el-input__inner {
                            border-radius: 0.83rem;
                            border-top-right-radius: 0;
                            border-bottom-right-radius: 0;
                        }
                    }
                    .el-input-group__append {
                        border: none;
                    }
                    .el-button {
                        background-color: #2364d9;
                        border-radius: 0.83rem;
                        border-top-left-radius: 0;
                        border-bottom-left-radius: 0;
                        border-color: #2364d9;
                        height: 40px;
                        span,
                        i {
                            color: #fff;
                        }
                    }
                }
            }
            .comeback_btn {
                cursor: pointer;
                width: 6.17rem;
                height: 3rem;
                line-height: 3rem;
                background: #ffa200;
                border-radius: 0.33rem;
                font-size: 1.17rem;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #ffffff;
                text-align: center;
            }
        }

        &-bottom {
            .seach-list {
                &-left {
                    ::v-deep .el-tabs__nav-scroll {
                        border-bottom: 1px solid #d8d8d8;
                        padding-left: 12.17rem;
                    }
                    ::v-deep .el-tabs__header {
                        margin-bottom: 0.67rem;
                    }
                    ::v-deep .el-tabs__content {
                        padding-left: 12.17rem;
                        padding-right: 11.83rem;
                    }
                    .tab-list {
                        display: flex;
                        justify-content: space-between;

                        .item-ul {
                            li {
                                margin-bottom: 1.33rem;
                                h4 {
                                    font-size: 1.33rem;
                                    font-family: PingFangSC-Regular, PingFang SC;
                                    font-weight: 400;
                                    color: #f56c6c;
                                    line-height: 2.5rem;
                                    span {
                                        color: @theme-text-color-primary;
                                    }
                                    cursor: pointer;
                                }
                                h5 {
                                    font-size: 1.17rem;
                                    font-family: PingFangSC-Regular, PingFang SC;
                                    font-weight: 400;
                                    color: #999999;
                                    line-height: 1.67rem;
                                    margin-bottom: 0.25rem;
                                }
                                p {
                                    font-size: 1.17rem;
                                    font-family: PingFangSC-Regular, PingFang SC;
                                    font-weight: 400;
                                    color: #333333;
                                    line-height: 1.67rem;
                                    width: 29.58rem;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    .list-name {
                                        color: #333333;
                                        padding-right: 1rem;
                                        border-right: 1px solid #333333;
                                        margin-right: 1rem;
                                    }
                                }
                            }
                        }

                        .item-right {
                            width: 70.5rem;
                            .right-header {
                                display: flex;
                                justify-content: space-between;
                                margin-bottom: 1.33rem;
                                h3 {
                                    font-size: 1.5rem;
                                    font-family: PingFangSC-Semibold,
                                        PingFang SC;
                                    font-weight: 600;
                                    color: #333333;
                                    line-height: 2.08rem;
                                }
                                span {
                                    font-size: 1.5rem;
                                    font-family: PingFangSC-Regular, PingFang SC;
                                    font-weight: 400;
                                    color: #767c93;
                                    line-height: 2.08rem;
                                    cursor: pointer;
                                }
                            }

                            .right-heat {
                                ul {
                                    li {
                                        float: left;
                                        width: 46%;
                                        display: flex;
                                        justify-content: space-between;
                                        padding: 0 0.25rem;
                                        margin-bottom: 1.33rem;
                                        margin-right: 4.33rem;

                                        &:nth-child(1) {
                                            .index-list {
                                                color: #f56c6c;
                                            }
                                            .flame-icon {
                                                color: #f56c6c;
                                            }
                                        }

                                        &:nth-child(2) {
                                            .index-list {
                                                color: #ff5000;
                                            }
                                            .flame-icon {
                                                color: #f56c6c;
                                            }
                                        }

                                        &:nth-child(3) {
                                            .index-list {
                                                color: #ffa200;
                                            }
                                            .flame-icon {
                                                color: #f56c6c;
                                            }
                                        }

                                        &:nth-child(2n) {
                                            margin-right: 0;
                                        }

                                        span,
                                        .index-list {
                                            font-size: 1.5rem;
                                            font-family: PingFangSC-Regular,
                                                PingFang SC;
                                            font-weight: 400;
                                            color: #767c93;
                                            line-height: 2.08rem;
                                        }
                                        p {
                                            span {
                                                color: #333333;
                                            }
                                            .text-list {
                                                cursor: pointer;
                                            }
                                        }
                                        .index-list {
                                            margin-right: 1.5rem;
                                        }
                                        .flame-icon {
                                            margin-right: 0.67rem;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .advanced-search {
        padding-left: 1rem;
        background-color: #fbfbfb;
        p {
            padding-left: 1rem;
        }
        ::v-deep .el-form {
            .el-form-item {
                margin-bottom: 0;
            }
            .el-form-item__label {
                width: 7rem;
            }
            .btn-item {
                display: none;
            }
        }
        ::v-deep .el-collapse {
            border-top: 0;
            &-item {
                .el-collapse-item__header {
                    padding-left: 1.5rem;
                    justify-content: flex-start;
                    border-bottom: 0;
                }
                .el-collapse-item__arrow {
                    margin-left: 5px;
                }
                .el-collapse-item__wrap {
                    border-bottom: 0;
                }
                .el-collapse-item__content {
                    padding-bottom: 0;
                }
            }
        }
    }
}
</style>
